<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="__STATIC__/plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="__STATIC__/plugins/layui/css/layui.css" media="all">
    <style>
        .children{
            padding-left: 10%;
        }
    </style>
</head>
<body>
<form id="form" method="POST" action="{:url('questionnaire/category_edit')}" accept-charset="UTF-8" class="layui-form">
    <br/>
    <input type="hidden" name="id" id="id" value="{$naire.id}">
    <div class="layui-form-item">
        <div class="layui-form-item">
            <label class="layui-form-label">问题</label>
            <div class="layui-input-block">
                <input type="text" value="{$naire.name}" id="title"  name="title" autocomplete="off" lay-verify="required" placeholder="请输标题" class="layui-input">
            </div>
        </div>
    </div>
    {notempty name="$naire.category[0]['name']"}
    {foreach $naire.category as $i=>$c}
    <div class="layui-form-item multi">
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline"><input class="layui-input" value="{$c.name}"  lay-verify="required" placeholder="显示" name="name[]" type="text">
            </div>
            <div class="layui-input-inline" style="width: 271px">
                <button class="layui-btn layui-btn-sm layui-btn-primary add" type="button">添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-info add_children" type="button">添加下级</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger remove" type="button">删除</button>
            </div>
        </div>
        {notempty name='$c.children'}
        {foreach $c['children'] as $s }
        <div class="layui-form-item children">
            <div class="layui-inline">
                <label class="layui-form-label">下级分类</label>
                <div class="layui-input-inline"><input class="layui-input" value="{$s}" lay-verify="required" placeholder="显示" name="name_{$i}[]" type="text">
                </div>
                <div class="layui-input-inline" style="width: 271px">

                    <button class="layui-btn layui-btn-sm layui-btn-danger removeChildren" type="button">删除</button>
                </div>
            </div>
        </div>
        {/foreach}
        {/notempty}
    </div>
    {/foreach}
    {else/}
    <div class="layui-form-item multi">
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline"><input class="layui-input" value=""  lay-verify="required" placeholder="显示" name="name[]" type="text">
            </div>
            <div class="layui-input-inline" style="width: 271px">
                <button class="layui-btn layui-btn-sm layui-btn-primary add" type="button">添加</button>
                <button class="layui-btn layui-btn-sm layui-btn-info add_children" type="button">添加下级</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger remove" type="button">删除</button>
            </div>
        </div>
    </div>
    {/notempty}

</form>
<div class="layui-form-item">
    <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
        <button class="layui-btn layui-btn-primary" type="reset" id="reset">取消</button>
    </div>
</div>
</body>
</html>
<script>
    layui.use(['form','layer'], function () {
        var form = layui.form;
        window.$ = layui.$;

        function addClick() {
            $('form').on('click','.add',function (e) {
                e.preventDefault();
                var l = $(this).parents('div.layui-form-item.multi');
                var clone = l.clone();
                clone.find('div.children').remove();
                clone.find('input').val('');
                l.parent().append(clone);
            });
        }

        function removeClick() {
            $('form').on('click', '.remove', function (e) {
                e.preventDefault();
                var _self = $(this);
                if ($('div.layui-form-item.multi').length > 1) {
                    var _multi = $(this).parents('div.layui-form-item.multi');
                    var index = _multi.index('.multi');
                    _multi.find('div.layui-form-item.children').remove();
                    _multi.remove();
                }
            })
        }

        function removeChildren(){
            $('form').on('click', '.removeChildren', function (e) {
                e.preventDefault();
                console.log(this);
                var _self = $(this);
                _self.parents('div.layui-form-item.children').remove();
            })
        }

        function addChildren(){
            $('form').on('click','.add_children',function(e){
                e.preventDefault ();
                var l = $(this).parents('div.layui-form-item.multi');
                var clone = l.clone();
                var index=l.index('.multi');
                clone.find('.add,.add_children').remove()
                    .end().find('div.layui-form-item.children').remove()
                    .end().find('.remove').removeClass('remove').addClass('removeChildren')
                    .end().find('label').text('下级分类')
                    .end().find('input').val('').attr('name','name_'+index+'[]')
                    .end().addClass('children').removeClass('multi');
                console.log(clone);
                l.append(clone);
            })
        }

        function submit() {
            form.on('submit(formDemo)', function () {
                var form=$('#form');
                var parents=form.find('[name="name[]"]');
                var data=[];
                parents.each(function(i,elem){
                    var tmp={};
                    tmp.name=elem.value;
                    tmp.children=[];
                    var children=$(elem).parents('div.multi').find('.children input');
                    children.each(function(i,elem){
                        tmp.children.push(elem.value);
                    });
                    data.push(tmp);
                });
                console.log(data);
                data=JSON.stringify(data);
                var tmp={
                    data:data,
                    title:form.find('#title').val(),
                    id:$('#id').val()
                };
                $.post(form.attr('action'),tmp,function(response){
                    if(response.code==0){
                        var index=parent.layer.getFrameIndex(window.name);
                        setTimeout(function(){parent.layer.close(index)},1000);
                    }
                    layer.msg(response.msg);
                });
                return false;
            });
            $('#reset').click(function(){
                var index=parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            })
        }
        $(function () {
            addClick();
            removeClick();
            addChildren();
            removeChildren();
            submit();
        });
    });
</script>
